<!DOCTYPE html>
<html lang="en">
<head>
    <!--    <meta charset="UTF-8">-->
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kueiq音乐后台系统</title>
    <script src="javascripts/jquery-1.11.3.js"></script>
    <script src="javascripts/jquery.min.js"></script>
    <link rel="stylesheet" href="stylesheets/style.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script>
        $(document).ready(function () {
            $(".p").click(function () {
                $(this).nextAll().toggle();
            });
        });

        // 切换菜单
        function oTab(index) {
            $(".right > div").hide();
            $("#box" + index).show();
        }

        function oTabs(index) {
            $(".right > div").hide();
            $("#boxs" + index).show();
        }
    </script>
    <script src="js/Data.js" ></script>
    <link href="stylesheets/ss.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="header">
        <div class="left1"><img class="img1" src=""/>
            <h1 class="tit">Kueiq音乐</h1>
        </div>
        <div class="set">
            <a href="logine.html">登录</a> ｜ <a href="index.html">退出</a> ｜ <a href="UpataSings.html">帮助</a>
        </div>
    </div>
    <div class="row contents">
        <div class="col-2 left">
            <ul class="list_nav">
                <li>
                    <ul>
                        <li class="p" onclick="oTab(1)"><i class="el-icon-s-data"></i>数据统计<i
                                class="el-icon-arrow-right"></i></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="p"><i class="el-icon-s-custom"></i>权限管理<i class="el-icon-arrow-right"></i></li>
                        <li class="c">添加管理员</li>
                        <li class="c">权限管理</li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="p"><i class="el-icon-service"></i>歌曲管理 <i class="el-icon-arrow-right"></i></li>
                        <li class="e" onclick="oTab(2)">添加歌曲</li>
<!--                        <li class="e" onclick="oTabs(2)">删除歌曲</li>-->
<!--                        <li class="e" onclick="oTabs(3)">修改歌曲信息</li>-->
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="p"><i class="el-icon-mic"></i>歌手管理<i class="el-icon-arrow-right"></i></li>
                        <li class="e">查询歌手信息</li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="p"><i class="el-icon-tickets"></i>订单中心<i class="el-icon-arrow-right"></i></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li class="p"><i class="el-icon-s-tools"></i>系统设置<i class="el-icon-arrow-right"></i></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="col-10 right">
            <div id="box1">
                <div class="box1">
                    <div class="box1_flex box1_one">
                        111
                    </div>
                    <div class="box1_flex box1_one">
                        22
                    </div>
                    <div class="box1_flex box1_one">
                        133
                    </div>
                    <div class="box1_flex box1_one">
                        444
                    </div>
                </div>
                <div class="box1">
                    <div class="box1_flex box1_two">
                        111
                    </div>
                </div>
                <div class="box1">
                    <div class="box1_flex box1_three">
                        111
                    </div>
                    <div class="box1_flex box1_three">
                        111
                    </div>
                </div>
                <div class="box1">
                    <div class="box1_flex box1_three">
                        111
                    </div>
                    <div class="box1_flex box1_three">
                        111
                    </div>
                </div>
            </div>
             <!--权限管理-->
<!--            <div id="box2">-->
<!--                <div class="box1">-->
<!--                    <div class="box1_flex box1_one">-->
<!--                        aaaaaaaaaaaaaaa-->
<!--                    </div>-->
<!--                    <div class="box1_flex box1_one">-->
<!--                       sssssssssss-->
<!--                    </div>-->
<!--                    <div class="box1_flex box1_one">-->
<!--                        sdddddddddddd-->
<!--                    </div>-->
<!--                    <div class="box1_flex box1_one">-->
<!--                        fffffffffff-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="box1">-->
<!--                    <div class="box1_flex box1_two">-->
<!--                        111-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="box1">-->
<!--                    <div class="box1_flex box1_three">-->
<!--                        111-->
<!--                    </div>-->
<!--                    <div class="box1_flex box1_three">-->
<!--                        111-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="box1">-->
<!--                    <div class="box1_flex box1_three">-->
<!--                        111-->
<!--                    </div>-->
<!--                    <div class="box1_flex box1_three">-->
<!--                        111-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <!-- 歌曲管理选项-->
            <div id="box2">
                <h2 class="title">歌曲管理-->添加歌曲信息</h2>
                <table cellspacing="0" class="table" width="98%">
                    <colgroup>
                        <col width="10%"/>
                        <col width="25%"/>
                        <col width="15%"/>
                        <col width="10%"/>
                        <col width="25%"/>
                        <col width="15%"/>
                    </colgroup>
                    <tbody>
                    <tr>
                        <td>名称：</td>
                        <td><input type="text" id="singName"></td>
                        <td></td>
                        <td>歌手：</td>
                        <td><input type="text" id="singer"></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>专辑：</td>
                        <td><input type="text" id="singAlbum"></td>
                        <td></td>
                        <td>类型：</td>
                        <td><input type="text" id="singType"></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
                <div class="btn_box">
                    <input type="button" value="提 交" class="btn01" id="btn">
                    <input type="button" value="重 置" class="btn02">
                </div>
                <h2 class="title">歌曲管理-->显示歌曲信息</h2>
                <table cellspacing="0" class="table1" width="98%" id="tab">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>歌手</th>
                        <th>专辑</th>
                        <th>类型</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
            <div class="bg"></div>
            <div class="dialog">
                <h1></h1>
                <button class="btn01" id="btn01">确定</button>
            </div>
        </div>





    </div>






<script src="./javascripts/vue-2.6.12.js"></script>
<script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
        // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data 对象就是要渲染到页面上的数据
        data: {
            // count: 0
        },
        // methods 的作用，就是定义事件的处理函数
        methods: {
            // add(n) {
            //     // 在 methods 处理函数中，this 就是 new 出来的 vm 实例对象
            //     // console.log(vm === this)
            //     console.log(vm)
            //     // vm.count += 1
            //     this.count += n
            // },
            // sub() {
            //     // console.log('触发了 sub 处理函数')
            //     this.count -= 1
            // }
        }
    })
</script>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</html>
